<template>
  <div>
    <el-breadcrumb separator="/">
    	<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    	<el-breadcrumb-item>商城管理</el-breadcrumb-item>
    	<el-breadcrumb-item>商户管理</el-breadcrumb-item>
    </el-breadcrumb>
	<el-row style="position: relative;">
		<el-col :span="5">
			<el-input v-model="seachlist.name" placeholder="商户名称/商户编号"></el-input>
		</el-col>
		<!-- <el-col :span="4">
			<el-select v-model="seachlist.shopCategory" placeholder="选择业务分类">
				<el-option value="" label="请选择业务分类"></el-option>
			    <el-option key="0" label="普通商户" value="0"></el-option>
			    <el-option key="1" label="分期商户" value="1"></el-option>
			  </el-select>
		</el-col> -->
		<el-col :span="4">
			<el-select v-model="seachlist.onOffStatus" placeholder="选择状态">
				<el-option value="" label="请选择状态"></el-option>
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
		</el-col>
		<el-col :span="4">
			<el-select v-model="seachlist.shopMenuId" placeholder="选择分类">
				<el-option value="" label="请选择分类"></el-option>
			    <el-option
			      v-for="item in options1"
			      :key="item.menuId"
			      :label="item.name"
			      :value="item.menuId">
			    </el-option>
			  </el-select>
		</el-col>
		<el-button type="primary" @click="search">搜索</el-button>
		<el-button type="info" plain @click="clear">清空</el-button>
		<el-button style="position: absolute;right: 10px;" type="primary" @click="goAdd">添加商户</el-button>
	</el-row>
	<el-card>
		<el-table :data="MerchantsList" border stripe>
			<el-table-column label="商户编号" prop="shopId"></el-table-column>
			<el-table-column label="序号" prop="sort"></el-table-column>
			<el-table-column label="商户名称" prop="shopName"></el-table-column>
			<el-table-column label="隶属品牌" prop="brandName"></el-table-column>
			<el-table-column label="所在地" prop="city"></el-table-column>
			<el-table-column label="在售商品" prop="sellItemCount"></el-table-column>
			<el-table-column label="月销量" prop="currentMounthSellCount"></el-table-column>
			<el-table-column label="联系电话" prop="shopPhone"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-switch
					  v-model="scope.row.onOffStatus"
					  @change="changeType(scope.row.shopId,scope.row)"
					  active-color="#13ce66"
					  inactive-color="#ff4949"
					  :active-value="1"
					  :inactive-value="2">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="showEdit(scope.row.shopId)" type="primary" size="mini" :disabled="scope.row.onOffStatus==2">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageCount"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
	</el-card>
  </div>
</template>

<script>
  export default{
    data(){
		return{
			MerchantsList:[],
			total:0,
			pageSize:20,
			pageCount:1,
			addDialogVisible:false,
			seachlist:{
				"name":'',
				"onOffStatus":'',
				"shopMenuId":'',
				"shopId":'',
				"shopName":'',
				"shopCategory":''
			},
			options: [{
				  value: '1',
				  label: '已上架'
				}, {
				  value: '2',
				  label: '已下架'
				}],
			options1:[],
			isFirstEnter:false
		}
	},
	created() {
		this.getList()
		this.getCategory()
	},
	beforeRouteEnter(to,from,next) {
		if(from.path == '/updateMerchantOne'){
			to.meta.isBack = true
		}
		next();
	},
	activated(){
		if(!this.$route.meta.isBack || this.isFirstEnter){
			this.pageCount=1
			this.pageSize=20
			this.total=0
			this.seachlist={"name":'',"onOffStatus":'',"shopMenuId":'',"shopId":'',"shopName":'',"shopCategory":''}
			this.MerchantsList = [];
			this.getList();
		}
		this.$route.meta.isBack=false
		this.isFirstEnter=false
	},
	methods:{
		clear(){
			this.seachlist={
				"name":'',
				"onOffStatus":'',
				"shopMenuId":'',
				"shopId":'',
				"shopName":'',
				"shopCategory":''
			}
			this.getList();
		},
		async getList(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/shopManage/list',{
				"onOffStatus":this.seachlist.onOffStatus,/* 状态 */
				"pageCount":this.pageCount,/* 当前页数 */
				"pageSize":this.pageSize,/* 每页条数 */
				"shopId":this.seachlist.shopId,/* 商户编号 */
				"shopMenuId":this.seachlist.shopMenuId,/* 分类 */
				"shopName":this.seachlist.shopName,/*, 商户名称 */
				"shopCategory":this.seachlist.shopCategory
				
			})
			setTimeout(() => {
			  loading.close();
			}, 500);
			this.total = res.data.total
			this.MerchantsList = res.data.records
			
		},
		search(){
			this.seachlist.shopId = ''
			this.seachlist.shopName = ''
			if((/^\d+$/.test(this.seachlist.name))) {/* id */
				this.seachlist.shopId=this.seachlist.name
			}else{/* 为id */
				this.seachlist.shopName=this.seachlist.name
			}
			this.getList()
		},
		async getCategory(){
			const {data:res} = await this.$http.get('/shopManage/menuList')
			this.options1 = res.data
		},
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			this.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
			this.pageCount = val
			this.getList()
		},
		goAdd(){
			this.$router.push('/addMerchant')
		},
		async changeType(id,info){
			const {data:res} = await this.$http.post('/shopManage/updateType',{'id':id,'type':info.onOffStatus})
			if(res.code!==200) {
				info.onOffStatus = !info.onOffStatus
				return this.$message.error('修改状态失败')
			}
			this.$message.success('修改状态成功')
		},
		showEdit(id){
			this.$router.push({path:"/updateMerchantOne",query:{id:id}})
		}
	}
  }
</script>

<style lang="less" scoped>
	.el-card{
		margin-top: 10px;
	}
	.el-col{
		margin-right: 10px;
	}
</style>
